<template>
  <div>
    <div class="data_box">

      <!-- left_box -->
      <div class="data_box_left">
        <div class="left_top">
          <el-card class="box-card left_card">
            <div class="Tickets_text"> 工单统计 <span>{{start}} ~ {{ end }}</span></div>
            <div class="Tickets">
              <div>
                <h1>{{total}}</h1>
                <span>工单总数（个）</span>
              </div>
              <div>
                <h1>{{completedTotal}}</h1>
                <span>完成工单（个）</span>
              </div>
              <div>
                <h1>{{ progressTotal }}</h1>
                <span>进行工单（个）</span>
              </div>
              <div>
                <h1>{{cancelTotal}}</h1>
                <span>取消工单（个）</span>
              </div>
            </div>
          </el-card>
          <el-card class="box-card right_card">
            <div class="sell_text"> 销售统计 <span>{{start}} ~ {{ end }}</span></div>
            <div class="sell">
              <div>
                <h1>{{ OrderCount}}</h1>
                <span>订单数(个)</span>
              </div>
              <div>
                <h1>{{ Amount}}</h1>
                <span>销售额(万元)</span>
              </div>

            </div>
          </el-card>
        </div>

        <!-- echarts_top -->
        <div class="left_bottom">
          <el-card class="box-card bottom_card">

            <div>
              <p>销售数据
                <span>{{start}} ~ {{ end }}</span>
                <button @click="fn1">周</button>
                <button @click="fn2">月</button>
                <button @click="fn3">年</button>
              </p>
            </div>

            <div>
              <div
                ref="box"
                class="chart-box"
                style="height: 300px"
              >
              </div>
              <div
                ref="box1"
                class="chart-box1"
                style="height: 300px"
              ></div>
            </div>
          </el-card>
        </div>
      </div>
      <!-- echarts_top -->

      <!-- right_box -->
      <div class="data_box_right">
        <el-card class="box-card hot_card">
          <div class="shopHot_text"> 商品热榜 <span>{{start}} ~ {{ end }}</span></div>
          <div class="shopHot"  v-for="(item, index) in skuTopList" :key="index">
            <div>
              <span class="imglist" :class="index === 0 ||index === 1 || index === 2 ? 'imglist'+ (index+1) : ''">{{ index + 1}}</span>
              <span class="shophot_list">{{ item.skuName }}</span>
            </div>
            <div>{{item.count}}单</div>
          </div>

        </el-card>

      </div>
    </div>

    <!-- main_echarts_bottom -->
    <div class="main_echarts_bottom">
      <el-card class="box-card echarts_bottom_left">
        <div class="Tickets_text">
          <p>合作商点位数Top5</p> <span>...</span>
        </div>
        <div class="echarts_bottom_box">
          <div class="main_echarts_bottom">

            <!-- main_echarts_bottom -->
            <div
              ref="box3"
              class="chart-box3"
              style="height: 330px"
            >
            </div>
            <!-- main_echarts_bottom -->

          </div>
          <div class="main_echarts_bottom_text">
            <h5>{{ VmCount}}<p>点位数</p></h5>
            <h5>{{UserCount}}<p>合作商数</p></h5>
          </div>
        </div>
      </el-card>

      <el-card class="box-card echarts_bottom_right">
        <div class="Tickets_text">
          <p>异常设备监控</p> <span>...</span>
        </div>
        <div class="err_watcher">
          <img
            src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
            alt=""
          >
          <div class="dataText">暂无数据</div>
        </div>
      </el-card>
    </div>
    <!-- main_echarts_bottom -->
  </div>
</template>

<script>
import weekday from 'dayjs/plugin/weekday'
import { userWork, orderCount, orderAmount, skuTop, amountCollect, regionCollect, nodeCollect, vmCount, userCount } from '@/api/other'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
dayjs.extend(weekday)
export default {
  data () {
    return {
      start: '',
      end: '',
      /* 工单总数 */
      total: 407,
      /* 完成数 */
      completedTotal: 0,
      /* 取消总数 */
      cancelTotal: 401,
      /* 进行工单 */
      progressTotal: 0,
      /* 销售额 */
      Amount: 7.83,
      /* 订单总数 */
      OrderCount: 18945,
      /* 热榜10 */
      topValue: 10,
      skuTopList: [],
      /* 销售数据 */
      obj1: {},
      arr: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      obj2: {},
      /* 饼图 */
      arrList: [],
      VmCount: 0,
      UserCount: 0
    }
  },
  async created () {
    // console.log(dayjs())
    this.start = dayjs(Date.now()).startOf('month').format('YYYY.MM.DD')
    this.end = dayjs(Date.now()).format('YYYY.MM.DD')
    this.workStatistical()
    this.orderCount()
    this.orderAmount()
    this.skuTop()
    this.vmCount()
    this.userCount()
    await this.amountCollect(dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'), 1)
    /* 周 */
    this.obj1.xAxis = this.obj1.xAxis.map(item => this.arr[dayjs(item).format('d')])
    this.echartsOne()

    await this.regionCollect(dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'))
    this.echartsTwo()

    await this.nodeCollect()
    this.echartsThree()
  },
  methods: {
    async fn1 () {
      await this.amountCollect(dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'), 1)
      this.obj1.xAxis = this.obj1.xAxis.map(item => this.arr[dayjs(item).format('d')])
      this.echartsOne()
      await this.regionCollect(dayjs(Date.now()).weekday(1).format('YYYY-MM-DD'))
      this.echartsTwo()
    },
    async fn2 () {
      await this.amountCollect(dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'), 1)
      this.echartsOne()
      await this.regionCollect(dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'))
      this.echartsTwo()
    },
    async fn3 () {
      await this.amountCollect(dayjs(Date.now()).startOf('year').format('YYYY-MM-DD'), 2)
      this.echartsOne()
      await this.regionCollect(dayjs(Date.now()).startOf('year').format('YYYY-MM-DD'))
      this.echartsTwo()
    },
    async workStatistical () {
      const res = await userWork(dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss'), dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'))
      this.total = res[0].total + res[1].total
      this.completedTotal = res[0].completedTotal + res[1].completedTotal
      this.cancelTotal = res[0].cancelTotal + res[1].cancelTotal
      this.progressTotal = res[0].progressTotal + res[1].progressTotal
    },
    async orderCount () {
      const res = await orderCount(dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss'), dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'))
      // console.log(res)
      this.OrderCount = res
    },
    async orderAmount () {
      const res = await orderAmount(dayjs(Date.now()).startOf('month').format('YYYY-MM-DD HH:mm:ss'), dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'))
      // console.log(res)
      this.Amount = (res / 10000).toFixed(2)
    },
    async skuTop () {
      const res = await skuTop(
        dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'),
        dayjs(Date.now()).format('YYYY-MM-DD'),
        this.topValue)
      // console.log(res)
      this.skuTopList = res
    },
    async amountCollect (time, count) {
      const res = await amountCollect(
        time,
        dayjs(Date.now()).format('YYYY-MM-DD'),
        count
      )
      this.obj1 = res
    },
    async regionCollect (time) {
      const res = await regionCollect(
        time,
        dayjs(Date.now()).format('YYYY-MM-DD')
      )
      this.obj2 = res
    },
    echartsOne () {
      /* echarts_one */
      const myChart = echarts.init(this.$refs.box)
      myChart.setOption({
        title: {
          text: '销售额趋势图',
          left: 'left',
          textStyle: {
            fontSize: '14px',
            color: '#333333'

          }
        },
        tooltip: {
          trigger: 'axis' // 悬浮弹框
        },
        color: ['#ec635d'],
        xAxis: {
          type: 'category',
          data: this.obj1.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: this.obj1.series,
            type: 'line',
            smooth: true,
            symbolSize: 4, // 设定实心点的大小
            itemStyle: {
              normal: {
                color: '#ec635d',
                label: {
                  show: false, // 开启显示
                  position: 'bottom', // 在下方显示
                  textStyle: {
                  // 数值样式
                    color: '#65ABE7',
                    fontSize: 16
                  }
                }
              }
            },

            // 阴影样式
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(243, 93, 93,0.7)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255, 255, 255 , 0.1)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      )
    },
    echartsTwo () {
      /* echarts_two */
      const myChart1 = echarts.init(this.$refs.box1)
      // 绘制图表
      myChart1.setOption({
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: '14px',
            color: '#333333'

          }
        },
        tooltip: {},
        xAxis: {
          data: this.obj2.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            barWidth: '10%',
            color: '#96b0f9',
            data: this.obj2.series
          }
        ]
      })
    },
    echartsThree () {
      /* echarts_three */
      const myChart2 = echarts.init(this.$refs.box3)
      // 绘制图表
      myChart2.setOption({
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            radius: ['25%', '60%'],
            roseType: 'radius',
            type: 'pie',
            data: this.arrList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    async nodeCollect () {
      const res = await nodeCollect()
      // console.log(res)
      this.arrList = res
    },
    async vmCount () {
      const res = await vmCount()
      // console.log(res)
      this.VmCount = res
    },
    async userCount () {
      const res = await userCount()
      // console.log(res)
      this.userCount = res
    }
  }
}
</script>

<style lang="scss" scoped>
  .data_box {
    display: flex;
    .data_box_left {
      .left_top {
        display: flex;
        .left_card {
          background: #e9f3ff;
          background-image: url(data:),
            url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
          background-repeat: no-repeat;
          border-radius: 20px;
          background-position: 0 0, calc(100% - 12px) 100%;
          width: 640px;
          height: 176px;
          span {
            margin-left: 4px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
          }
          .Tickets_text {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333;
            p {
              margin-left: 10px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999;
            }
          }
          .Tickets {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            h1 {
              color: #072074;
              font-size: 36px;
              font-weight: 600;
              text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
            }
            span {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #91a7dc;
              line-height: 17px;
            }
          }
        }
        .right_card {
          width: 500px;
          height: 176px;
          margin-left: 20px;
          background: #e9f3ff;
          background: #fbefe8
            url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
            calc(100% - 12px) 100%;
          border-radius: 20px;
          .sell_text {
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333;
            span {
              margin-left: 10px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999;
            }
          }
          .sell {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            h1 {
              color: #ff5757;
              font-size: 36px;
              font-weight: 600;
              text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
            }
            span {
              height: 17px;
              margin-top: 3px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #de9690;
              line-height: 17px;
            }
          }
        }
      }
      //     <!-- echarts -->
      .bottom_card {
        width: 1160px;
        height: 352px;
        margin-top: 20px;
        border-radius: 20px;
        p {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
        }
        span {
          margin-left: 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
        }
        .chart-box {
          width: 590px;
          display: inline-block;
          margin-top: 20px;
        }
        .chart-box1 {
          width: 520px;
          float: right;
          margin-top: 20px;
        }
      }
      //     <!-- echarts -->
    }
    .data_box_right {
      .hot_card {
        width: 398px;
        height: 550px;
        margin-left: 20px;
        border-radius: 20px;
        .shopHot_text {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333;
          span {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999;
          }
        }
        .shopHot {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          margin-top: 25px;
          .imglist {
            background: url() no-repeat;
            width: 23px;
            font-size: 14px;
            color: #8e5900;
            background-position: center;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 18px;
            margin-left: 21px;
          }
          .imglist1 {
            background: url() no-repeat;
          }
          .imglist2{
              background: url() no-repeat;
          }
          .imglist3 {
            background: url() no-repeat;
          }
          .shophot_list {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 30px;
          }
          div {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #737589;
            line-height: 20px;
            text-align: right;
          }
        }
      }
    }
  }

  .main_echarts_bottom {
    display: flex;
    .echarts_bottom_left {
      width: 950px;
      height: 380px;
      margin-top: 20px;
      border-radius: 20px;
      .Tickets_text {
        display: flex;
        justify-content: space-between;
        span {
          color: #5f84ff;
          cursor: pointer;
          text-align: center;
          line-height: 6px;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          border: 1px solid#5f84ff;
        }
      }
      p {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
      }
      .echarts_bottom_box {
        display: flex;
        align-items: center;
        .main_echarts_bottom {
          width: 500px;
          height: 300px;

          margin-left: 70px;
          .chart-box3 {
            width: 500px;
            display: inline-block;
            margin-top: 20px;
          }
        }
        .main_echarts_bottom_text {
          width: 154px;
          height: 230px;
          margin-top: 50px;
          text-align: center;
          margin-left: 30px;
          background-color: #f6f5f5;
          border-top-right-radius: 30px;
          border-bottom-left-radius: 30px;
          h5 {
            // height: 33px;
            margin-top: 40px;
            font-size: 24px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #072074;
            // line-height: 33px;
          }
          p {
            height: 17px;
            margin-top: 6px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000412;
            line-height: 17px;
          }
        }
      }
    }
    .echarts_bottom_right {
      width: 725px;
      margin-left: 20px;
      height: 380px;
      margin-top: 20px;
      border-radius: 20px;
      .Tickets_text {
        display: flex;
        justify-content: space-between;
        span {
          color: #5f84ff;
          cursor: pointer;
          text-align: center;
          line-height: 6px;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          border: 1px solid#5f84ff;
        }
      }
      p {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
      }
      .err_watcher {
        width: 600px;
        height: 290px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 123px;
          height: 96px;
        }
        .dataText {
          margin-top: 25px;
          color: #20232a;
          font-size: 14px;
        }
      }
    }
  }
</style>
